<template>
  <view class="edit-logo-container">
    <!-- 头部 -->
    <view class="header">
	  <view class="content">
		  <view class="title">编辑公司logo</view>
	    <button class="save-button" @click="saveLogo">保存</button>
	  </view>
      <view class="description">该logo将出现在公司主页及公司下展示的所有职位</view>
    </view>

    <!-- 上传区域 -->
    <view class="upload-section">
      <view class="upload-area" @click="uploadLogo">
        <text v-if="!logoUrl">点击上传</text>
        <image v-else :src="logoUrl" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 注意事项 -->
    <view class="notes-section">
      <view class="notes-title">注意事项</view>
      <view class="note-item">
        <text>1. 请上传清晰且完整的图片</text>
      </view>
      <view class="note-item">
        <text>2. 请上传与品牌相关的图片，含有其他无关内容将无法通过审核（包括但不限于含无关水印、招聘信息、联系方式、二维码等）</text>
      </view>
      <view class="note-item">
        <text>3. 上传图片须符合中国相关法律法规，不得含有违法内容或不良信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      logoUrl: null, // 上传的logo URL
    };
  },
  methods: {
    // 上传logo
    uploadLogo() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.logoUrl = res.tempFilePaths[0];
        },
        fail: (err) => {
          uni.showToast({
            title: '上传失败，请重试',
            icon: 'none',
          });
        },
      });
    },
    // 保存logo
    saveLogo() {
      if (!this.logoUrl) {
        uni.showToast({
          title: '请先上传logo',
          icon: 'none',
        });
        return;
      }
      // 这里可以调用API保存logo
      uni.showToast({
        title: '保存成功',
        icon: 'success',
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
  },
};
</script>

<style scoped>
.edit-logo-container {
  padding: 20px;
  background-color: #fff;
}

.header {
  margin-bottom: 20px;
}

.content{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}

.header .title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.header .description {
  font-size: 14px;
  color: #666;
}

.upload-section {
  margin-top: 20px;
}

.upload-area {
  width: 110px;
  height: 100px;
  border: 2px dashed #ddd;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #999;
  font-size: 10px;
}

.upload-area image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.notes-section {
  margin-top: 20px;
}

.notes-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.note-item {
	color: #999;
	font-size: 9px;
	margin-bottom: 5px;
}

.save-button {
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  color: #2F318B;
  background-color: #fff;
  margin: 0;
}

.save-button::after{
	border: none;
}
</style>